<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.summary >div:nth-child(2){padding: 8px 0 3px;}
			.summary .mui-h4{font-weight: bold;font-family: monospace;}
			.name >div{padding: 2px 0;}
			.mui-input-group .mui-input-row{height: auto;}
			.mui-input-row label{padding: 11px 16px 6px;}
			.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{top:16px;right: 20px;}
			.mui-radio input[type=radio]:checked:before{content: '\e442';}
			.cell-icon{padding-right: 16px;}
			.cell-icon .mui-icon,.cell-icon .icon{font-size: 22px;color: #DD524D;}
			nav.mui-bar{background-color: #F2F2F2;}
			.btn-pay{width: 100%;border-width: 0;border-radius: 0;height: 50px;font-size: 1.1em;}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">收银台</h1>
		</header>
		<div class="mui-content mb-60">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  		<li class="mui-table-view-cell summary mui-text-center">
					<div>支付金额</div>
					<div class="mui-h4">￥<span class="mui-h2" id="txtPayAmount">0.00</span></div>
					<div class="mui-h6" v-text="resources.GetPayTradeTypeTextByValue(tradetype)">信用卡循环还款计划</div>
				</li>
		  	</ul>
		  	<form class="mui-input-group">
		  		<div class="mui-input-row mui-radio text-middle" v-if="tradeType!=resources.PayTradeType.Recharge">
		  			<label>
		  				<div class="mui-table" style="width: auto;">
		  					<div class="mui-table-cell text-middle cell-icon">
		  						<span class="mui-icon iconfont icon-balance"></span>		  						
		  					</div>
		  					<div class="mui-table-cell name">
		  						<div>余额</div>
		  						<div class="mui-h6">可用额度<span id="txtBalance">0.00</span>元</div>		  						
		  					</div>
		  				</div>
		  			</label>
		  			<input v-model="paytype" value="-1" type="radio">
		  		</div>
		  		<div class="mui-input-row mui-radio text-middle" v-for="item in bankcards">
		  			<label>
		  				<div class="mui-table" style="width: auto;">
		  					<div class="mui-table-cell text-middle cell-icon">
		  						<svg class="icon text-middle" aria-hidden="true">
		  							<use :xlink:href="'#icon-' + item.BankCode"></use>
		  						</svg>		  						
		  					</div>
		  					<div class="mui-table-cell name">
		  						<div>{{item.BankName}}</div>
		  						<div class="mui-h6">{{resources.GetBankCardTypeByValue(item.Type)}}({{item.CardNo.substr(item.CardNo.length-4)}})</div>		  						
		  					</div>
		  				</div>
		  			</label>
		  			<input v-model="paytype" :value="item.ID" type="radio">
		  		</div>
		  		<div class="mui-input-row mui-radio text-middle" @tap="addBankCard()">
		  			<label>
		  				<div class="mui-table" style="width: auto;">
		  					<div class="mui-table-cell text-middle cell-icon">
		  						<svg class="icon text-middle" aria-hidden="true">
		  							<use xlink:href="#icon-ccard"></use>
		  						</svg>		  						
		  					</div>
		  					<div class="mui-table-cell name">
		  						<div>使用新卡支付</div>
		  						<div class="mui-h6">无需网银，免手续费，安全绑卡</div>		  						
		  					</div>
		  				</div>
		  			</label>
		  			<input v-model="paytype" value="-2" type="radio">
		  		</div>
		  	</form>
		</div>
		<footer>
			<button id="btnPay" class="mui-btn btn-pay mui-btn-primary">
				确认支付 ￥<span id="txtConfigPayAmount"></span></button>
		</footer>
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();
			
			var asset;
			var id, amount, tradeType;
			var vm;
			
			$id("btnPay").addEventListener("tap", function () {
				var val = vm.paytype*1; 
				if(val==0){
					mui.toast("请选择支付方式"); 
					return;
				}
				mui.showLoading();
				app.post("Pay", {'ID':id, Amount:amount, PayType:vm.paytype, TradeType:tradeType}, function (data) {
					mui.toast(data.message); 
					mui.openWindow({url:"checkout-success.html", id:"checkout-success.html", extras:{TradeType:tradeType, data:data.data}});
				})
			})
			
			addBankCard = function () {
				mui.openWindow("bankcard-add.html?p=1&t=3", "bankcard-add.html");
			}
			
			getRadioValue = function (name){  
			    // method 1   
			    var radio = document.getElementsByName(name);  
			    for (i=0; i<radio.length; i++) {  
			        if (radio[i].checked) {  
			            return (radio[i].value)  
			        }
			    }  
			    return "";
			}  
			
			getBalance = function () {
				if(tradeType!=resources.PayTradeType.Recharge){
					app.getAssetData(function (data) {
						asset = data;
						$id("txtBalance").innerText = asset.Balance.toFixed(2);
					});
				}
			}
			
			buildBankCard = function () {
				vm.bankcards = app.getBankCard();
			}
			
			init = function(){
				console.log(window.location.search); 
				id = app.getParam("ID");
				amount = app.getParam("Amount")*1;
				tradeType = app.getParam("TradeType");
				$id("txtPayAmount").innerText = amount.toFixed(2); 
				$id("txtConfigPayAmount").innerHTML = amount.toFixed(2); 
				console.log(tradeType);
				getBalance();
				
				vm = new Vue({
					el: '.mui-content',
					data: {
						'paytype': 0,
						'tradetype': tradeType,
						'bankcards': null
					},
					created: function() { 
						this.$nextTick(function() { 
							this.listAjax(); 
						});
					},
					computed: {},
					methods: {
						listAjax: function() { 
							var _self = this; 
							app.getBankCardData(function(data) { 
								_self.bankcards = data; 
							});
						}
					}
				});
			}
			
			init();
		</script>
	</body>

</html>